import React from 'react';
import moment from 'moment';
import './index.less';

const couponHeadgray = require('src/static/couponHeadgray.png')
const couponHeadRed = require('src/static/couponHeadRed.png')
const expire = require('src/static/expire.png')
const used = require('src/static/used.png')


const formatString = "YYYY.MM.DD";
export default class CouponItem extends React.PureComponent {

  render() {
    const { item, isUsed, isExpired } = this.props;
    let headImg = couponHeadRed;
    let bodyImg;
    if (isUsed) {
      headImg = couponHeadgray;
      bodyImg = used;
    } else if (isExpired) {
      headImg = couponHeadgray;
      bodyImg = expire;
    }

    const dateStart = moment(item.date_start).format(formatString)
    const dateEnd = moment(item.date_end).format(formatString)
    return (
      <div className="coupon-item">
        <div className="coupon-item-head">
          <img src={headImg} alt="" />
          <div className="coupon-item-head-type">
            <div>
              <p>
                <span>{item.name}</span>
                {/* <span className="number">80</span>
                <span className="coupon-type-desc">优惠券</span> */}
              </p>
              <span className="date">{dateStart}-{dateEnd}</span>
            </div>
            {/* <span className="coupon-item-button">立即使用</span> */}
          </div>
        </div>
        <div className="coupon-item-body">
          <div className="product-type">
            <p>限品类：全部商品 </p>
            <p>
              <span>券编号：</span>
              <span className="coupon-item-body-code">{item.code}</span>
            </p>
          </div>
          <div>
            <img src={bodyImg} alt="" />
          </div>
        </div>
      </div>
    )
  }
}